<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../css/reset.css">
  <style>
    .top {
      height: 31px;
      background: url(./imgs/top_bg.jpg) repeat;
    }

    .top__content {
      width: 987px;
      height: 100%;
      margin: 0 auto;
    }

    .left__position {
      float: left;
      height: 100%;
      margin-left: 8px;
      padding-left: 18px;
      font-size: 12px;
      line-height: 31px;
      color: #a6a6a7;
      background: url(./imgs/icon_position.jpg) no-repeat left center;
      cursor: pointer;
    }

    .right__navs {
      float: right;
      height: 100%;
    }

    .right__navs li {
      float: left;
      height: 100%;
      line-height: 31px;
      font-size: 12px;
      color: #acacac;
    }

    .first-item {
      width: 116px;
    }

    .login__mian {
      color: #f50209;
    }

    .nav-item {
      position: relative;
      width: 71px;
      text-align: center;
      cursor: pointer;
    }

    .nav-item.wide {
      width: 87px;
    }

    .item-line {
      background: url(./imgs/icon_line.jpg) no-repeat right center;
    }

    .qrcode {
      position: absolute;
      top: 35px;
      left: 5px;
      box-shadow: 0 0 3px #b0b0b0;
    }

    .down-arrow {
      padding-right: 18px;
      background: url(./imgs/icon_jt.jpg) no-repeat right center;
    }

    .myimooc {
      position: relative;
    }

    .myimooc:hover .content__list-hover {
      display: block;
    }

    .content__list-hover {
      display: none;
      position: absolute;
      width: 279px;
      height: 161px;
      border: 2px solid #ddd;
      background-color: #fff;
      top: 29px;
      left: 4px;
    }

    .content__list-hover__top {
      position: absolute;
      top: -33px;
      left: -2px;
      width: 74px;
      height: 31px;
      line-height: 27px;
      color: #e95351;
      border: 2px solid #ddd;
      border-bottom: none;
      background-color: #fff;
      background: url(./imgs/icon_top_l.jpg) no-repeat 61px 10px,white;
    }
  </style>
  <style>
    .center {
      width: 987px;
      height: 98px;
      margin: 0 auto;
    }

    .logo {
      float: left;
      margin: 26px 0 0 5px;
    }

    .search {
      float: left;
      width: 487px;
      height: 73px;
      margin-top: 25px;
      margin-left: 79px;
    }

    .search__content {
      height: 32px;
      width: 487px;
      border: 2px solid #e32016;
    }

    .search__input {
      float: left;
      width: 366px;
      height: 100%;
      padding: 0 0 0 12px;
      font-size: 12px;
      line-height: 32px;
      border: none;
      outline: none;
    }

    .search__camera {
      float: left;
      width: 50px;
      height: 100%;
      background: url(./imgs/icon_ca.jpg) no-repeat center center;
    }

    .search__btn {
      float: right;
      width: 59px;
      height: 100%;
      color: #fff;
      border: none;
      background: url(./imgs/icon_search.jpg) no-repeat center center;
      background-color: #e32016;
    }

    .search_tags {
      float: left;
      margin-top: 8px;
      font-size: 12px;
      line-height: 12px;
    }

    .search_tag {
      float: left;
      margin-right: 11px;
      color: #b9b9b9;
    }

    .search_tag a {
      text-decoration: none;
      color: #b9b9b9;
    }

    .cart {
      float: left;
      width: 130px;
      height: 34px;
      margin-left: 17px;
      margin-top: 25px;
      border: 1px solid #f0f0f0;
      border-left-width: 2px;
      border-right-width: 2px;
      background: url(./imgs/icon_shop.jpg) no-repeat 19px top;
      font-size: 12px;
      text-indent: 51px;
      line-height: 38px;
      color: #e8463c;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <div class="top">
    <div class="top__content">
      <div class="left__position">北京</div>
      <ul class="right__navs">
        <li class="first-item item-line">
          <span class="login__text">你好，请登录</span>
          <span class="login__mian">免</span>···
        </li>
        <li class="nav-item item-line">
          <span class="login__text">我的订单</span>
        </li>
        <li class="nav-item item-line wide myimooc">
          <span class="login__text down-arrow">
            我的慕课
          </span>
          <div class="content__list-hover">
            <div class="content__list-hover__top">我的慕课</div>
          </div>
        </li>
        <li class="nav-item item-line wide">
          <span class="login__text down-arrow">商家服务</span>
        </li>
        <li class="nav-item item-line wide">
          <span class="login__text down-arrow">网站导航</span>
        </li>
        <li class="nav-item item-line">
          <span class="login__text">
            手机慕课网
            <img class="qrcode" src="./imgs/icon_erm.jpg" alt="">
          </span>
        </li>
        <li class="nav-item item-line">
          <span class="login__text">网站无障碍</span>
        </li>
      </ul>
    </div>
  </div>
  <div class="center">
    <img class="logo" src="./imgs/logo.jpg"></img>
    <div class="search">
      <div class="search__content">
        <input type="text" class="search__input" placeholder="蓝牙鼠标">
        <span class="search__camera"></span>
        <button class="search__btn"></button>
        <ul class="search_tags">
          <li class="search_tag">
            <a href="#">健康保障</a>
          </li>
          <li class="search_tag">
            <a href="#">荣耀手机</a>
          </li>
          <li class="search_tag">
            <a href="#">家居装饰</a>
          </li>
          <li class="search_tag">
            <a href="#">热水器</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="cart">
      我的购物车
    </div>
  </div>
</body>

</html>